<!--
 * @Author       : wfl
 * @LastEditors  : wfl
 * @description  :
 * @updateInfo   :
 * @Date         : 2023-02-27 16:19:42
 * @LastEditTime : 2023-06-05 13:42:01
-->
<route lang="yaml">
meta:
  whiteList: true
  title: 登录
  constant: true
  layout: false
      </route>

<script lang="ts" setup name="LoginWxdd">
// wx
import './wx.js'
// dd
import './dd.js'
import { useI18n } from 'vue-i18n'
import { ElMessage } from 'element-plus'

const props = defineProps({
  isWx: {
    type: Boolean,
    defaule: true
  }
})

const { t } = useI18n()

const handWxddLogin = () => {
  if (props.isWx) {
    (window as any).WxLogin({
      self_redirect: true,
      id: 'login_wxdd',
      appid: 'wx475278af61a44891',
      scope: 'snsapi_login',
      redirect_uri: 'http://192.168.1.112:9000',
      state: '',
      style: '',
      href: ''
    })
  }
  else {
    // STEP3：在需要的时候，调用 window.DTFrameLogin 方法构造登录二维码，并处理登录成功或失败的回调。
    (window as any).DTFrameLogin(
      {
        id: 'login_wxdd',
        width: 400,
        height: 400
      },
      {
        redirect_uri: encodeURIComponent('http://192.168.1.112'),
        client_id: 'dingrlib5hpe1hyixd90',
        scope: 'openid',
        response_type: 'code',
        prompt: 'consent'
      },
      (loginResult: { redirectUrl: any; authCode: any; state: any; }) => {
        const { redirectUrl } = loginResult
        // 这里可以直接进行重定向
        window.location.href = redirectUrl
        // 也可以在不跳转页面的情况下，使用code进行授权
      },
      (errorMsg: any) => {
        ElMessage.error(errorMsg)
      }
    )
  }
}

watch(() => props.isWx, () => {
  nextTick(() => handWxddLogin())
}, { immediate: true })
</script>

<template>
  <el-form class="login-form">
    <div class="title-container">
      <h3 class="login-title">
        {{ isWx ? t('system.wx') : t('system.dd') }}{{ t('app.login') }}
      </h3>
    </div>
    <div id="login_wxdd"></div>
  </el-form>
</template>

<style lang="scss" scoped>
@import './form';
/* stylelint-disable-next-line selector-id-pattern */
#login_wxdd {
 display: flex;
 justify-content: center;
}
</style>
